<template>
  <view class="page">
		<view class="header">
			<view class="locationName">
				<uni-icons type="calendar-filled" size="19" color="#2dccc1"></uni-icons>
				<text>第一医院</text>
			</view>
		</view>
		    <view class="uni-search-bar">
			    <uni-search-bar placeholder="搜索科室、医生" cancel-button="none" radius="100"/>
		    </view>
		<view class="classify_wrap">
		 <!-- 首页轮播图开始 -->
		 	<view class="uni-margin-wrap">
		 				<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
		 					<view v-if="error">{{error.message}}</view>
		 					<view v-else>
		 						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		 							:duration="duration">
		 							<swiper-item v-for="(item, index) in data" :key="item._id">
		 								<view class="swiper-item">
		 									<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
		 								</view>
		 							</swiper-item>
		 						</swiper>
		 					</view>
		 				</unicloud-db>
		 			</view>	
		 		<!-- 首页轮播图结束 -->
				<!-- 预约问诊查询开始 -->
				<view class="vip-wrap">
					<uni-card title="" :thumbnail="vipIcon" margin="5px">
						<uni-grid :column="column" :show-border="false" :square="false">
							<uni-grid-item v-for="(item, index) in vipItem">
								<view class="grid-item-box">
									<image :src="item.icon" style="width: 200rpx; height: 150rpx;" mode="Widthfix"></image>
									<text>{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-card>
				</view>
				<!-- 预约问诊查询结束 -->
			<!--就诊卡开始-->
	        <view class="Patient card">
	        	<view class="card-content">
	        		<uni-card title="" margin="5px" >
	        			<view class="grid-item-box-Patientcard">	
	        				<text class="card-description">初次使用就诊卡</text>
	        			    <image class="card-image" src="/static/imgss/就诊卡.png" style="width: 310rpx; height: 74rpx;" mode="aspectFill"></image>
	        			</view>
	        		</uni-card>
	        	 </view>
	        </view>
			<!--就诊卡结束-->
			<!--门诊服务开始-->
			<view class="Outpatient">
				<uni-card title="门诊服务" margin="5px" >
				    <uni-grid :column="column" :show-border="false" :square="false">
				        <uni-grid-item v-for="(item, index) in OutpatientItem">
							<view class="grid-item-box-Outpatient">
							<image :src="item.icon" style="width: 100rpx; height: 100rpx;" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
							</view>
						</uni-grid-item>
				    </uni-grid>	
				</uni-card>	
			</view>
			<!--门诊服务结束-->
			<!--住院服务开始-->
			<view class="hospitalization">
				<uni-card title="住院服务" margin="5px" >
				    <uni-grid :column="column" :show-border="false" :square="false">
				        <uni-grid-item v-for="(item, index) in hospitalizationItem">
							<view class="grid-item-box-hospitalization">
							<image :src="item.icon" style="width: 100rpx; height: 100rpx;" mode="aspectFill"></image>
							<text>{{ item.text }}</text>
							</view>
						</uni-grid-item>
				    </uni-grid>	
				</uni-card>	
			</view>
			<!--住院服务结束-->
		</view>	
	</view>
</template>

<script>
  export default {
    data() {
      return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				column: 3,
				vipItem: [
					{text: '', icon: '/static/imgss/预约.jpg'},
					{text: '', icon: '/static/imgss/问诊.jpg'},
					{text: '', icon: '/static/imgss/报告.jpg'}
				],
				OutpatientItem: [
					{text: '门诊签到', icon: '/static/imgss/门诊签到.jpg'},
					{text: '医技签到', icon: '/static/imgss/医技签到.jpg'},
					{text: '排队候诊', icon: '/static/imgss/排队候诊.jpg'},
					{text: '智能导诊', icon: '/static/imgss/智能导诊.jpg'},
					{text: '门诊缴费', icon: '/static/imgss/门诊缴费.jpg'},
					{text: '门诊充值', icon: '/static/imgss/门诊充值.jpg'},
					{text: '充值退费', icon: '/static/imgss/充值退费.jpg'},
					{text: '电子发票', icon: '/static/imgss/电子发票.jpg'},
					{text: '费用记录', icon: '/static/imgss/费用记录.jpg'},
					{text: '门诊记录', icon: '/static/imgss/门诊记录.jpg'},
					{text: '医技预约', icon: '/static/imgss/医技预约.jpg'},
					{text: '治疗预约', icon: '/static/imgss/治疗预约.jpg'},
					{text: '治疗签到', icon: '/static/imgss/治疗签到.jpg'},
					{text: '我的处方', icon: '/static/imgss/我的处方.jpg'},
					{text: '体检管理', icon: '/static/imgss/体检管理.jpg'},
					{text: '满意度问卷', icon: '/static/imgss/满意度问卷.jpg'}
				],
				hospitalizationItem:[
					{text: '入院登记', icon: '/static/imgss/入院登记.jpg'},
					{text: '住院充值', icon: '/static/imgss/住院充值.jpg'},
					{text: '出院结算', icon: '/static/imgss/出院结算.jpg'},
					{text: '电子发票', icon: '/static/imgss/电子发票1.jpg'},
					{text: '出院带药', icon: '/static/imgss/出院带药.jpg'},
					{text: '住院记录', icon: '/static/imgss/住院记录.jpg'},
					{text: '充值记录', icon: '/static/imgss/充值记录.jpg'},
					{text: '费用记录', icon: '/static/imgss/费用记录1.jpg'},
					{text: '病历邮寄', icon: '/static/imgss/病历邮寄.jpg'},
					{text: '满意度问卷', icon: '/static/imgss/满意度问卷1.jpg'}
					],
				
      }
    },
    methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
    }
  }
</script>

<style scoped>
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	.page{
		background-color: #FFFFFF;
	}
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		text-align: center;
	}
	.locationName{
		display: flex;
		flex-direction: row;
		height: 40px;
		line-height: 50px;
		font-size: 14px
	}
	.uni-search-bar{
		width: 750rpx;
		height: 50px;
	}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	.grid-item-box {
		text-align: center;
	    justify-content: center;
		padding: 20rpx 0 0 0;
	}
	.grid-item-box image{
		margin: 0 auto;
	}
	.grid-item-box-Outpatient {
		text-align: center;
		justify-content: center;
		padding: 20rpx 20rpx 20rpx 20rpx ;
	}
    .grid-item-box-Outpatient image{
		margin: 0 auto;
	}
	.grid-item-box-Patientcard image{
		margin: 0 auto;
	}	
	.card-content {
		text-align: center;
	}
    .grid-item-box-hospitalization {
    	text-align: center;
    	justify-content: center;
    	padding: 20rpx 20rpx 20rpx 20rpx ;
    }
    .grid-item-box-hospitalization image{
    	margin: 0 auto;
    }
</style>
